<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    .false {
        color: red;
    }

    .true {
        color: green;
    }
</style>

<body>
    <input class="reset_game" type="button" value="重新开始游戏" onclick="reSet()"><br>
    请输入要猜的数字[1,100]:<input class="to_guess_num" type="text" value="0">
    <input type="button" value="猜测" onclick="guess()"><br>
    已经猜的次数:<span class="has_guess_num">0</span><br>
    结果:<span class="result"></span>

</body>
<script>
    //输入数字
    let guess_num = document.querySelector(".to_guess_num");

    //猜测的次数
    let has_guess_num = document.querySelector(".has_guess_num");
    console.dir(has_guess_num);

    //已经猜测的结果
    let result = document.querySelector(".result");

    function reSet() {
        guess_num.value = 0;
        has_guess_num.innerHTML = "0";
        result.innerHTML = "";
    }

    //生成随机num
    let random_num = Math.floor(Math.random() * 100) + 1;//生成1-100的整数
    console.log(random_num)
    function guess() {
        has_guess_num.innerHTML = parseInt(has_guess_num.innerHTML) + 1;
        let input_num = parseInt(guess_num.value);
        if (input_num > random_num) {
            result.innerHTML = "猜大了！";
            result.className = false;
        } else if (input_num < random_num) {
            result.innerHTML = "猜小了！";
            result.className = false;
        } else {
            result.innerHTML = "恭喜你,猜对了！";
            result.className = true;
        }
    }

</script>

</html>